<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/10/10
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加盘点页面</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">

    <el-form :inline="true" :model="goodsSearchForm" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="goodsSearchForm.branchid" placeholder="-请选择分店-">
                <el-option label="-请选择分店-" value="null"></el-option>
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button icon="el-icon-search" circle @click="searchGoods(1)"></el-button>
        </el-form-item>
    </el-form>

    <%--    新增按钮--%>
    <el-button type="success" @click="addInventory" size="small">新增盘点</el-button>
    <%--    刷新按钮--%>
    <el-button type="success" @click="inittable" size="small">刷新</el-button>

    <%--    主表格--%>
    <el-table
            :data="tableDate"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
        >
        </el-table-column>
        <el-table-column
                prop="goodsid"
                label="商品编号"
                width="100"
        >
        </el-table-column>
        <el-table-column
                label="商品图片"
                width="100"
        >
            <template slot-scope="scope">
                <img :src="scope.row.url" alt="" width="80px" height="45px">
            </template>
        </el-table-column>
        <el-table-column
                prop="goodsname"
                label="商品名称"
                width="140"
        >
        </el-table-column>
        <el-table-column
                prop="layout"
                label="键盘布局"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="keycapname"
                label="键帽材质"
                width="120"
        >
        </el-table-column>
        <el-table-column
                prop="keyboardcolorname"
                label="键盘颜色"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="shafttype"
                label="轴体类型"
                width="120"
        >
        </el-table-column>
        <el-table-column
                prop="shaftchoose"
                label="轴体选择"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="interfacetype"
                label="接口类型"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="backlightcolorname"
                label="背光颜色"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="cprice"
                label="商品进价"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="商品售价"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="店铺名称"
                width="140"
        >
        </el-table-column>
        <el-table-column
                prop="counts"
                label="商品数量"
                width="100"
        ></el-table-column>
        <el-table-column
                label="盘点数量"
                width="100">
            <template slot-scope="scope">
                <el-input v-model="scope.row.invennum" @change="subnum(scope.row,'invennum')" type="text"/>
            </template>
        </el-table-column>
        <el-table-column
                label="报损数量"
                prop="lossnum"
                width="100">
            <%-- <template slot-scope="scope">
                 <el-input v-model="scope.row.bnum" :disabled="true"></el-input>
             </template>--%>
        </el-table-column>
    </el-table>

    <%--    分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 15]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableDate: [],
            //当前页码显示为1
            currentPage: 1,
            pageSize: 5,
            total: 1,
            goodsSearchForm: {},
            branchs: [],
            multipleSelection: [],
            inventoryState:true,

        },
        created() {
            this.inittable();
            this.initbranch();
            this.searchstate();
        },

        methods: {
            inittable() {
                axios.post("/goods/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.goodsSearchForm).then(resp => {
                    app.tableDate = resp.data.data.list
                    app.total = resp.data.data.total
                    this.searchstate();
                })
            },
            searchGoods(status) {
                if (status){
                    this.currentPage=1;
                }
                this.inittable()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },

            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            //初始化分店
            initbranch() {
                axios.get("/goods/branch").then(resp => {
                    this.branchs = resp.data.data
                })
            },
            //新增盘点按钮
            addInventory() {
                if (!this.multipleSelection[0]) {
                    this.$alert('请选择要盘点的商品', '新增盘点', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `取消操作`
                            });
                        }
                    });
                }else {
                    this.$confirm('进行盘点申请嘛, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        if (this.inventoryState===true){
                            console.log("!!!!!!!!!!!!!!!!!!!",app.multipleSelection)
                            axios.post("/inventory/insert", app.multipleSelection).then(resp => {
                                if(resp.data.code===200){
                                    console.log("~~~~~~~~~~~~~~~~~~~~",app.multipleSelection)
                                    this.dialogVisible=false;
                                    this.$message({
                                        message: '添加盘点成功',
                                        type: 'success'
                                    });
                                    this.inittable();
                                }
                            })
                        }else {
                            this.$message({
                                message: '还有盘点未审核，无法新增盘点，请先将未审核的盘点审核',
                                type: 'warning'
                            });
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消添加'
                        });
                    });
                }
            },
            //盘点确认按钮
            confirm(){

            },
            //搜索所有状态
            searchstate(){
                axios.post("/inventory/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(resp => {
                    //遍历所有状态，如果发现有未审核的状态，inventoryState即为false
                    var flag=false;
                    resp.data.data.list.forEach(item=>{
                        if(item.state===1){
                            flag=true;
                            return;
                        }
                    })
                    if(flag==true){
                        this.inventoryState=false
                    }else{
                        this.inventoryState=true
                    }
                })
            },
            //盘点输入框失焦事件
            subnum(row, type) {
                if (type == 'invennum') {
                    if (row.invennum > row.counts) {
                        this.$message({
                            message: '输入数量有误！',
                            type: 'warning'
                        });
                        row.invennum = '';
                        return;
                    }
                    if (row.invennum < 0) {
                        this.$message({
                            message: '盘点数据有误！',
                            type: 'warning'
                        });
                        row.invennum = '';
                        return;
                    }
                    if (!/^[1-9]\d*$/.test(row.invennum)) {
                        this.$message({
                            message: '请检查数据格式！',
                            type: 'warning'
                        });
                        row.invennum = '';
                        return;
                    }
                    row.lossnum = row.counts - row.invennum
                }
            },
        },


    })
</script>
</html>
